<script setup>
import request from "@/utils/request";
import {SwipeCell, Cell, Button, Tag, Popup, Dialog, Image, Calendar} from "vant";
import {computed, ref} from "vue";
import { Local } from "@/utils/storage";
import { deleteItem } from '@/v-api/addNews'
import router from "@/router";
import {getOssPrefix} from "@/v-api/properties";
const userInfo = Local.get('userInfo')
const item = {
  schoolId: 1,
  authorId: userInfo.userId,
};
const items = ref([]);
const date = ref('');
const show = ref(false);
const selectedDate = ref(null);
const searchText = ref('');
const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
request.post(`activity/${item.schoolId}`)
    .then(response => {
      items.value = response.data;
      console.log(items.value)
    })
    .catch(error => {
      console.error(error);
    });
console.log(items)

const onConfirm = (value) => {
  show.value = false;
  date.value = formatDate(value);
  selectedDate.value = value;
  console.log('单个日期被选择');
};
// 处理所有日期选择
const handleAllDatesClick = () => {
  selectedDate.value = null;
  console.log('所有日期被选择');
};

// 过滤和格式化项目
const filteredItems = computed(() => {
  // if (!selectedDate.value) return items.value;
  // return items.value.filter(item => {
  //   const itemDate = new Date(item.time);
  //   return itemDate.toDateString() === selectedDate.value.toDateString();
  // });
  let filtered = items.value;

  if (selectedDate.value) {
    filtered = filtered.filter(item => {
      const itemDate = new Date(item.time);
      return itemDate.toDateString() === selectedDate.value.toDateString();
    });
  }

  const searchValue = searchText.value.trim().toLowerCase();
  if (searchValue) {
    filtered = filtered.filter(item => {
      return item.title.toLowerCase().includes(searchValue);
    });
  }

  return filtered;
});

const formattedItems = computed(() => {
  return filteredItems.value.map(item => {
    if (item.time) {
      const [datePart, timePart] = item.time.split('T');
      const url = getOssPrefix()+item.iconUrl;
      return {
        ...item,
        iconUrl: url,
        time: `${datePart} ${timePart}`,
      };
    }
    return item;
  });
});
</script>

<template>
  <td class="date-cell">
    <Cell title="选择单个日期" :value="date" @click="show = true" title-style="font-size: 16px"/>
  </td>
  <td class="all-dates-cell">
    <Cell title="选择所有日期" @click="handleAllDatesClick" title-style="font-size: 16px"/>
  </td>
  <Calendar
      v-model:show="show"
      @confirm="onConfirm"
      color="#d9f2ac"
      :min-date="new Date(2024, 5, 1)"
      :show-confirm="false"
      :show-mark="false"
  />
  <div class="list">
    <SwipeCell v-for="(item, index) in formattedItems"
               :key="index" class="bg_container">
      <div class="container"
           @click="router.push({ name:'activityDetail', params: { title: item.title, time: item.time, content: item.content, iconUrl: item.iconUrl, username:item.username,picture:item.picture }})">
        <div class="title">{{ item.title }}
        </div>
        <div class="card-body">
          <div class="content">{{ item.content }}</div>
          <Image :src="getOssPrefix()+item.picture" style="margin-top: 20px"/>
        </div>
        <div class="card-footer">
          <div class="user-icon-container">
            <Image
                round
                width="35px"
                height="35px"
                style="border: 1px solid #1e1f22"
                :src="item.iconUrl"
            />
            <span class="card-name">{{ item.username }}</span>
          </div>
          <span class="card-time">{{ item.time }}</span>
        </div>
      </div>
<!--      <template #left>-->
<!--        <Button square text="删除" icon="delete" class="delete-button" color="#7232dd" plain @click="deleteItem(item.id)"/>-->
<!--        <Button square text="编辑" icon="comment" class="delete-button" color="#7232dd" plain @click="router.push({ name:'finish', params: { title: item.title,content:item.content, id:item.id }})"/>-->
<!--      </template>-->
    </SwipeCell>
  </div>
  <van-search
      shape="round"
      v-model="searchText"
      background="#ffffff"
      placeholder="请输入搜索关键词"
      class="fixed-search"
  />
</template>

<style scoped>
.list {
  height: 640px; /* 设置高度为页面可视区域的100% */
  overflow-y: scroll; /* 设置垂直方向的滚动条 */
  background-color: #d3e8d3; /* 设置背景颜色 */
}
.bg_container{
  margin: 15px;
}
.container {
  padding: 20px;
  background-color: white;
  height: 400px; /* 调整容器高度，增加了阴影下方的空间 */
  width: 300px;
  margin-bottom: 20px; /* 添加与阴影同样的间距 */
  border: 1px solid black
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px; /* 添加标题和内容之间的间距 */
}

.content {
  font-size: 16px;
  overflow: hidden; /* 防止标题溢出 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 溢出用省略号表示 */
}

.delete-button{
  height: 100%;
  margin-right: 10px;
}

.card-footer {
  height: 30px; /* 固定底部高度 */
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 图标和时间左右对齐 */
  align-items: center; /* 垂直居中 */
}

.card-time {
  font-size: 16px;
}

.card-name {
  font-size: 16px;
}

.card-body {
  height: 300px; /* 固定主体高度 */
  margin-bottom: 20px; /* 主体下方的间距 */
  overflow: hidden; /* 防止溢出 */
}

.date-cell {
  width: 64%; /* 2/3 of the total width */
}
.all-dates-cell {
  width: 38%; /* 1/3 of the total width */
}

.fixed-search {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* Adjust z-index as needed */
}
</style>